<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root button {
            margin: 5px;
            padding: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div id="root">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>
<script>
    // 面向过程1
    // const btns = document.querySelectorAll("#root button");
    // const divs = document.querySelectorAll("#root div");
    // let index = 0;// 选中的下标
    // btns.forEach(function(item,i){
    //     divs[i].style.display = "none";
    //     btns[i].className = null;
    //     item.onclick = function(){
    //         btns[index].className = null;
    //         divs[index].style.display = "none";
    //         index = i;
    //         btns[index].className = "active";
    //         divs[index].style.display = "block";
    //     }
    // })
    // divs[index].style.display = "block";
    // btns[index].className = "active";


    // 面向过程
    // const btns = document.querySelectorAll("#root button");
    // const divs = document.querySelectorAll("#root div");
    // let index = 0;// 选中的下标
    // init();
    // // 初始化函数
    // function init(){
    //     btns.forEach(function(item,i){
    //         hide(i);
    //         item.onclick = function(){
    //             hide();
    //             index = i;
    //             show();
    //         }
    //     })
    //     show();
    // }
    //
    // function hide(i=index){
    //     btns[i].className = null;
    //     divs[i].style.display = "none";
    // }
    // function show(){
    //     divs[index].style.display = "block";
    //     btns[index].className = "active";
    // }


    // 面向对象：
    function Tab() {
        this.btns = document.querySelectorAll("#root button");
        this.divs = document.querySelectorAll("#root div");
        this.index = 0;// 选中的下标
        this.init();
    }

    Object.assign(Tab.prototype, {
        // 初始化函数
        init() {
            this.btns.forEach(function (item, i) {
                this.hide(i);
                const _this = this;
                item.onclick = function () {
                    _this.hide();
                    _this.index = i;
                    _this.show();
                }
            }.bind(this))
            this.show();
        },
        hide(i = this.index) {
            this.btns[i].className = null;
            this.divs[i].style.display = "none";
        },
        show() {
            this.divs[this.index].style.display = "block";
            this.btns[this.index].className = "active";
        }
    })

    new Tab();

</script>
</html>



